<template>
<div class="up-item">
  <table class="table-item">
    <thead>
      <tr>
        <td :class="itemIndex === 3 && tableIndex === 1 ? 'exchange-td' : ''"><p>名称</p></td>
        <td><p>现价</p></td>
        <td><p>涨跌额</p></td>
        <td><p>涨跌幅</p></td>
        <td><p>年初至今涨跌幅</p></td>
        <td><p v-if="itemIndex === 3 || itemIndex === 4 || itemIndex === 5">最高价</p><p v-else>最高</p></td>
        <td><p v-if="itemIndex === 3 || itemIndex === 4 || itemIndex === 5">最低价</p><p v-else>最低</p></td>
        <td><p>更新时间</p></td>
      </tr>
    </thead>
    <tbody>
      <transition
        v-for="item of dataList"
        :key="item.name"
        mode="out-in" appear
        :name="item.name"
        enter-active-class="'animated lightSpeedIn'"
        leave-active-class="'animated lightSpeedOut'"
      >
        <tr :key="item.name">
          <td><p :class="itemIndex === '3' ? 'exchange-p' : ''"><img v-if="itemIndex === '3'" class="flag-image" :src="'static/images/flag/' + item.name + '.jpg'">{{item.name}}</p></td>
          <td><p>{{item.price}}</p></td>
          <td><p :class="item.riseFallPrice>=0 ? 'increase' : 'drop'">{{item.riseFallPrice}}</p></td>
          <td><p :class="item.riseFallRange>=0 ? 'increase' : 'drop'">{{item.riseFallRange}}%</p></td>
          <td><p :class="item.yearRiseFallRange>=0 ? 'increase' : 'drop'">{{item.yearRiseFallRange}}%</p></td>
          <td><p>{{item.maxPrice}}</p></td>
          <td><p>{{item.minPrice}}</p></td>
          <td><p>{{item.date}}</p></td>
        </tr>
      </transition>
    </tbody>
  </table>
</div>
</template>
<script>
export default {
  name: 'FinancialTable',
  props: {
    dataList: Array,
    itemIndex: String
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="stylus" scoped>
.up-item
  width:90%
  height:1350px
  margin:0 auto
  top: 25%
  text-align: center
  .table-item
    color: #FFF
    margin:auto
    width: 100%
    word-break :break-all
    thead
      height: 70px
      line-height: 70px
      background: red
      text-align: center
      font-size: 32px
    tbody
      font-size: 35px
      tr
        height: 60px
        line-height: 60px
        td
          border-left: 0.5px solid #fff
          border-right: 0.5px solid #fff
          border-bottom: 0.5px solid #fff
          text-align: center
          box-sizing: border-box
          .increase
            color: red
          .drop
            color: #20e020
          .exchange-p
            text-align: left
            .flag-image
              padding-left: 20px
              padding-right: 40px
</style>
